<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#photo{position: relative;
			height: 900px; width: 1000px;
			border: 2px solid red;
			}
			#photo img{
				position: absolute;
			 
				height: 400px;
				width: 400px; 
			}
			
			#photo img:nth-of-type(1)
			{
				left: 0;
				top: 50px;
				transform: rotate(30deg);
			}
			#photo img:nth-of-type(2)
			{
				left: 30px;
				top: 50px;
				transform: rotate(60deg);
				transform: skew(49deg);
			}
			#photo img:nth-of-type(3)
			{
				left: 50px;
				top: 190px;
				transform: rotate(90deg);
				transform: skew(10deg);
			}
			#photo img:nth-of-type(4)
			{
				left: 540px;
				top: 40px;
				transform: rotate(90deg);
				transform: skew(14deg);
			}
			#photo img:nth-of-type(5)
			{
				left: 400px;
				top: 400px;
				transform: rotate(120deg);
			 
			}
			#photo img:nth-of-type(6)
			{
				left: 330px;
				top: 450px;
				transform: rotate(160deg); 
			}
			#photo img:nth-of-type(7)
			{
				left: 310px;
				top: 510px;
				transform: rotate(190deg);
			}
			#photo img:nth-of-type(8)
			{
				left: 560px;
				top: 550px;
				transform: rotate(60deg);
				transform: skew(249deg);
			}
			#photo img:nth-of-type(9)
			{
				left: 530px;
				top: 100px;
				transform: rotate(300deg);
				transform: skew(49deg);
			}
			 #photo img:nth-of-type(10)
			{
				right: 0;
				bottom: 0;
				transform: rotate(330deg);
				transform: skew(49deg);
				border: 4px dotted red;
			}
			#photo img:hover{
				left: 200px;
				top:200px;
				 transform: rotate(0deg) scale(1.5) skew(0);
				z-index: 1000;
			}
		</style>
	</head>
	<body>
		<div id="photo">
			<img src="../img2/1.jpg" />
			<img src="../img2/2.jpg" />
			<img src="../img2/3.jpg" />
			<img src="../img2/4.jpg" />
			<img src="../img2/5.jpg" />
			<img src="../img2/6.jpg" />
			<img src="../img2/7.jpg" />
			<img src="../img2/8.jpg" />
			<img src="../img2/9.jpg" />
			<img src="../img2/10.jpg" />
		</div>
	</body>
</html>
